<template>
  <el-row :gutter="20">
    <el-col :lg="7" :md="10" :sm="24" :xs="24" style="height: 100%">
      <el-card class="box-card fix-el-card" shadow="hover">
        <div class="account-avatar">
          <div class="avatar">
            <el-image :src="fullAvatarUrl"></el-image>
            <span @click="handleChangeAvatar">{{
              t("common.editButton")
            }}</span>
          </div>

          <h1>{{ state.accountName }}</h1>

          <!-- <el-button type="primary" plain>更换头像</el-button> -->
        </div>

        <el-descriptions
          :border="true"
          column="1"
          label-class-name="account-info-label"
          class="account-info"
        >
          <el-descriptions-item
            :label="t('account.employeeNumber')"
            label-align="right"
            v-if="state.employeeNumber"
            >{{ state.employeeNumber }}</el-descriptions-item
          >
          <el-descriptions-item
            :label="t('account.employeeNumber')"
            label-align="right"
            v-if="!state.employeeNumber"
            >—</el-descriptions-item
          >
          <el-descriptions-item
            :label="t('account.orgName')"
            label-align="right"
            v-if="state.orgName"
            >{{ state.orgName }}</el-descriptions-item
          >
          <el-descriptions-item
            :label="t('account.orgName')"
            label-align="right"
            v-if="!state.orgName"
            >—</el-descriptions-item
          >
          <el-descriptions-item
            :label="t('account.deptName')"
            label-align="right"
            v-if="state.deptName"
            >{{ state.deptName }}</el-descriptions-item
          >
          <el-descriptions-item
            :label="t('account.deptName')"
            label-align="right"
            v-if="!state.deptName"
            >—</el-descriptions-item
          >
          <el-descriptions-item
            :label="t('account.email')"
            label-align="right"
            v-if="state.email"
          >
            {{ state.email }}
          </el-descriptions-item>
          <el-descriptions-item
            :label="t('account.email')"
            label-align="right"
            v-if="!state.email"
            >—</el-descriptions-item
          >
          <el-descriptions-item
            :label="t('account.mobile')"
            label-align="right"
            v-if="state.mobile"
          >
            {{ state.mobile }}</el-descriptions-item
          >
          <el-descriptions-item
            :label="t('account.mobile')"
            label-align="right"
            v-if="!state.mobile"
            >—</el-descriptions-item
          >
          <el-descriptions-item
            :label="t('account.lastLoginTime')"
            label-align="right"
          >
            <el-tag size="small">{{ state.lastLoginTime }}</el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </el-col>
    <el-col :lg="17" :md="14" :sm="24" :xs="24">
      <el-card class="box-card fix-el-card" shadow="never">
        <el-tabs v-model="activeName" class="account-tabs">
          <el-tab-pane :label="t('account.accountInfo')" name="first">
            <el-row class="setting-row">
              <el-col :lg="19" :md="19" :sm="16" :xs="24">
                <h4 class="setting-key">{{ t("account.alias") }}</h4>
                <span class="setting-value" v-if="state.alias">{{
                  state.alias
                }}</span>
                <span class="setting-value" v-if="!state.alias">{{
                  t("account.notInitialized")
                }}</span>
              </el-col>
              <el-col :lg="5" :md="5" :sm="8" :xs="24" class="setting-button">
                <el-link type="primary" @click="handleChangeAlias">{{
                  t("common.settingButton")
                }}</el-link>
              </el-col>
            </el-row>
            <el-row class="setting-row">
              <el-col :lg="19" :md="19" :sm="16" :xs="24">
                <h4 class="setting-key">{{ t("account.gender") }}</h4>
                <span class="setting-value" v-if="state.gender == 1">{{
                  t("account.genderMale")
                }}</span>
                <span class="setting-value" v-if="state.gender == 0">{{
                  t("account.genderFemale")
                }}</span>
                <span class="setting-value" v-if="state.gender == 2">{{
                  t("account.genderUnknown")
                }}</span>
              </el-col>
              <el-col :lg="5" :md="5" :sm="8" :xs="24" class="setting-button">
                <el-link type="primary" @click="handleChangeGender">{{
                  t("common.settingButton")
                }}</el-link>
              </el-col>
            </el-row>
            <el-row class="setting-row">
              <el-col :lg="19" :md="19" :sm="16" :xs="24">
                <h4 class="setting-key">{{ t("account.birthday") }}</h4>
                <span class="setting-value" v-if="state.birthday">{{
                  state.birthday
                }}</span>
                <span class="setting-value" v-if="!state.birthday">{{
                  t("account.notInitialized")
                }}</span>
              </el-col>
              <el-col :lg="5" :md="5" :sm="8" :xs="24" class="setting-button">
                <el-link type="primary" @click="handleChangeBirthday">{{
                  t("common.settingButton")
                }}</el-link>
              </el-col>
            </el-row>
            <el-row class="setting-row">
              <el-col :lg="19" :md="19" :sm="16" :xs="24">
                <h4 class="setting-key">{{ t("account.idNumber") }}</h4>
                <span class="setting-value" v-if="state.idNumberMask">{{
                  state.idNumberMask
                }}</span>
                <span class="setting-value" v-if="!state.idNumberMask">{{
                  t("account.notInitialized")
                }}</span>
              </el-col>
              <el-col :lg="5" :md="5" :sm="8" :xs="24" class="setting-button">
                <el-link type="primary" @click="handleChangeId">{{
                  t("common.settingButton")
                }}</el-link>
              </el-col>
            </el-row>
            <el-row class="setting-row">
              <el-col :lg="19" :md="19" :sm="16" :xs="24">
                <h4 class="setting-key">{{ t("account.email") }}</h4>
                <span class="setting-value" v-if="state.emailMask">{{
                  state.emailMask
                }}</span>
                <span class="setting-value" v-if="!state.emailMask">{{
                  t("account.notInitialized")
                }}</span>
              </el-col>
              <el-col :lg="5" :md="5" :sm="8" :xs="24" class="setting-button">
                <el-link type="primary" @click="handleChangeEmail">{{
                  t("common.settingButton")
                }}</el-link>
              </el-col>
            </el-row>
            <el-row class="setting-row">
              <el-col :lg="19" :md="19" :sm="16" :xs="24">
                <h4 class="setting-key">{{ t("account.mobile") }}</h4>
                <span class="setting-value" v-if="state.mobileMask">{{
                  state.mobileMask
                }}</span>
                <span class="setting-value" v-if="!state.mobileMask">{{
                  t("account.notInitialized")
                }}</span>
              </el-col>
              <el-col :lg="5" :md="5" :sm="8" :xs="24" class="setting-button">
                <el-link type="primary" @click="handleChangeMobile">{{
                  t("common.settingButton")
                }}</el-link>
              </el-col>
            </el-row>
            <el-row class="setting-row">
              <el-col :lg="19" :md="19" :sm="16" :xs="24">
                <h4 class="setting-key">{{ t("account.password") }}</h4>
                <span class="setting-value" v-if="state.lastChangePasswordTime"
                  >{{ t("account.lastChangePasswordTime") }}
                  {{ state.lastChangePasswordTime }}</span
                >
                <span
                  class="setting-value"
                  v-if="!state.lastChangePasswordTime"
                  >{{ t("account.passwordNotChanged") }}</span
                >
              </el-col>
              <el-col :lg="5" :md="5" :sm="8" :xs="24" class="setting-button">
                <el-link type="primary" @click="handleChangePassword">{{
                  t("common.settingButton")
                }}</el-link>
              </el-col>
            </el-row>
          </el-tab-pane>
          <!-- <el-tab-pane label="安全设置" name="second">
            <el-row class="setting-row">
              <el-col :lg="19" :md="19" :sm="16" :xs="24"
                ><h4 class="setting-key">安全邮箱</h4>
                <span class="setting-value"
                  >您暂未设置邮箱，绑定邮箱可以用来找回密码、接收通知等。</span
                ></el-col
              >
              <el-col :lg="5" :md="5" :sm="8" :xs="24" class="setting-button"
                ><el-link type="primary" @click="">{{
                  t("common.settingButton")
                }}</el-link></el-col
              >
            </el-row>
          </el-tab-pane> -->
        </el-tabs></el-card
      ></el-col
    >
  </el-row>

  <change-avatar
    ref="changeAvatarRef"
    @on-submit-success="onAvatarChanged"
  ></change-avatar>
  <change-alias
    ref="changeAliasRef"
    @on-submit-success="onAliasChanged"
  ></change-alias>
  <change-gender
    ref="changeGenderRef"
    @on-submit-success="onGenderChanged"
  ></change-gender>
  <change-birthday
    ref="changeBirthdayRef"
    @on-submit-success="onBirthdayChanged"
  ></change-birthday>
  <change-id ref="changeIdRef" @on-submit-success="onIdChanged"></change-id>
  <change-email
    ref="changeEmailRef"
    @on-submit-success="onEmailChanged"
  ></change-email>
  <change-mobile
    ref="changeMobileRef"
    @on-submit-success="onMobileChanged"
  ></change-mobile>
  <change-password
    ref="changePasswordRef"
    @on-submit-success="onPasswordChanged"
  ></change-password>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
// import { Edit, Plus } from "@element-plus/icons-vue";
// import { ElMessageBox } from "element-plus";
// import utils from "../../utils/utils";
import { useStore } from "../../stores/store";
import apiAccount from "../admin/api/account";
import apiUser from "./api/user";
// import apiOrganization from "../admin/api/organization";
// import OrgTreeNode from "../admin/organization/tree-node";
// import Node from "element-plus/es/components/tree/src/model/node";
import changeAvatar from "./change-avatar.vue";
import changeAlias from "./change-alias.vue";
import changeGender from "./change-gender.vue";
import changeBirthday from "./change-birthday.vue";
import changeId from "./change-id.vue";
import changeEmail from "./change-email.vue";
import changeMobile from "./change-mobile.vue";
import changePassword from "./change-password.vue";
import { useI18n } from "vue-i18n";
import utils from "../../utils/utils";

const store = useStore();
const { t } = useI18n({ useScope: "global" });
const activeName = ref("first");
const changeAvatarRef = ref();
const changeAliasRef = ref();
const changeGenderRef = ref();
const changeBirthdayRef = ref();
const changeIdRef = ref();
const changeEmailRef = ref();
const changeMobileRef = ref();
const changePasswordRef = ref();

const fullAvatarUrl = ref("");

const state = reactive({
  accountName: "",
  alias: "",
  employeeNumber: "",
  orgName: "",
  deptName: "",
  gender: 2,
  birthday: "",
  idNumber: "",
  idNumberMask: "",
  // 扩展信息
  avatarUrl: "",
  email: "",
  emailMask: "",
  mobile: "",
  mobileMask: "",
  lastLoginTime: "",
  lastChangePasswordTime: "",
});

const handleAccountExtension = () => {
  apiAccount
    .getAccountExtension(store.accountInfo.accountId)
    .then((response: any) => {
      if (response.data.code == 200) {
        // 扩展信息
        // "accountId":"a3a2172b-ee9b-4a61-b296-50b9f6e31931",
        // "alias":"",
        // "avatarUrl":"",
        // "birthday":null,
        // "createAccountId":"anonymousUser",
        // "createAccountName":"anonymousUser",
        // "createTime":"2023-05-08 16:14:12",
        // "deptPath":"",
        // "description":"",
        // "email":"",
        // "ext_infos":"",
        // "idNumber":"",
        // "mobile":"13366002113",
        // "orgPath":"441a1758-a1ef-4358-bba2-9edb7618deaf",
        // "updateAccountId":"",
        // "updateAccountName":"",
        // "updateTime":"2023-05-08 16:14:12"
        Object.assign(state, response.data.data);
        fullAvatarUrl.value = apiUser.generateAvatarUrl(
          response.data.data.avatarUrl
        );

        // if (state.mobile.length >= 11) {
        //   let mobile = state.mobile;
        //   state.mobile =
        //     mobile.substring(0, 3) + "****" + mobile.substring(7, 11);
        // }
      }
    })
    .catch((err: any) => {
      utils.errorNotification(t("common.submitException"), err);
    });
};

const handleQueryLastTime = () => {
  apiUser
    .lastLoginTime(store.accountInfo.accountId)
    .then((response: any) => {
      if (response.data.code == 200) {
        state.lastLoginTime = response.data.data;
      }
    })
    .catch((err: any) => {
      utils.errorNotification(t("common.submitException"), err);
    });

  apiUser
    .lastChangePasswordTime(store.accountInfo.accountId)
    .then((response: any) => {
      if (response.data.code == 200) {
        state.lastChangePasswordTime = response.data.data;
      }
    })
    .catch((err: any) => {
      utils.errorNotification(t("common.submitException"), err);
    });
};

const handleChangeAvatar = () => {
  changeAvatarRef.value.show(fullAvatarUrl.value);
};
const onAvatarChanged = (avatarUrl: string) => {
  // console.log("onAvatarChanged", avatarUrl);
  state.avatarUrl = avatarUrl;
  store.accountInfo.avatarUrl = avatarUrl;
  store.setAccountInfo(store.accountInfo);
  fullAvatarUrl.value = apiUser.generateAvatarUrl(avatarUrl);
};

const handleChangeAlias = () => {
  changeAliasRef.value.show(state);
};
const onAliasChanged = (alias: string) => {
  state.alias = alias;
};

const handleChangeGender = () => {
  changeGenderRef.value.show(state);
};
const onGenderChanged = (gender: number) => {
  state.gender = gender;
  store.accountInfo.gender = gender;
  store.setAccountInfo(store.accountInfo);
};

const handleChangeBirthday = () => {
  changeBirthdayRef.value.show(state);
};
const onBirthdayChanged = (birthday: string) => {
  state.birthday = birthday;
  // store.getAccount.birthday = birthday;
  // store.commit("SET_ACCOUNT_INFO", store.getAccount);
};

const handleChangeId = () => {
  changeIdRef.value.show(state);
};
const onIdChanged = (idNumber: string, idNumberMask: string) => {
  state.idNumber = idNumber;
  state.idNumberMask = idNumberMask;
  // store.state.accountInfo.idNumber = idNumber;
  // store.commit("SET_ACCOUNT_INFO", store.state.accountInfo);
};

const handleChangeEmail = () => {
  changeEmailRef.value.show(state);
};
const onEmailChanged = (email: string, emailMask: string) => {
  state.email = email;
  state.emailMask = emailMask;
  // store.getAccount.email = email;
  // store.commit("SET_ACCOUNT_INFO", store.getAccount);
};

const handleChangeMobile = () => {
  changeMobileRef.value.show(state);
};
const onMobileChanged = (mobile: string, mobileMask: string) => {
  state.mobile = mobile;
  state.mobileMask = mobileMask;
  // store.state.accountInfo.mobile = mobile;
  // store.commit("SET_ACCOUNT_INFO", store.state.accountInfo);
};

const handleChangePassword = () => {
  changePasswordRef.value.show();
};
const onPasswordChanged = (lastChangePasswordTime: string) => {
  state.lastChangePasswordTime = lastChangePasswordTime;
};

onMounted(() => {
  state.accountName = store.accountName;
  state.employeeNumber = store.accountInfo.employeeNumber;
  state.orgName = store.accountInfo.orgName;
  state.deptName = store.accountInfo.deptName;
  state.gender = store.accountInfo.gender;
  // console.log("account-center-mounted", store, store.accountInfo);
  handleAccountExtension();
  handleQueryLastTime();
});
</script>
<style lang="scss" scoped>
.el-card {
  border-radius: 0;
  border: none;
}
.data-grid-search-form {
  margin-bottom: 0;
  padding-bottom: 0;
}
.account-avatar {
  text-align: center;
  padding-top: 20px;

  .avatar {
    margin: 0 auto;
    height: 100px;
    width: 100px;
    position: relative;
    text-align: center;
    border-radius: 50%;
    overflow: hidden;
    background: #ddd;

    span {
      width: 100%;
      height: 31px;
      opacity: 0.75;
      background: rgb(24, 24, 24) none repeat scroll 0% 0%;
      position: absolute;
      bottom: 0;
      left: 0;
      font-size: 14px;
      color: rgb(255, 255, 255);
      text-align: center;
      line-height: 31px;
      cursor: pointer;
    }
  }
  h1 {
    font-weight: normal;
  }
}

.account-info {
  // background: var(--el-color-success-light-9);
  margin: 20px 0 0 0;
}
.account-info-label {
  // background: var(--el-color-success-light-9);
  --el-descriptions-item-bordered-label-background: none;
}

.account-tabs {
  background-color: #fff;
}

.setting-row {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #f0f0f0;
}
.setting-row li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 10px;
}
.setting-key {
  display: block;
  margin: 8px 0 8px 0;
  font-weight: normal;
}

.setting-value {
  display: block;
  margin: 0 0 10px 0;
  color: var(--el-text-color-secondary);
  font-size: 15px;
  height: 22px;
}
.setting-button {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 10px;
  padding-right: 10px;
}
.setting-button a {
  text-decoration: none;
}
</style>

<style lang="scss">
.account-info td {
  background: none !important;
  border: none !important;
  border-right: none !important;
}
</style>
